import React, {Component} from 'react';
import {connect} from "react-redux";
import {Modal, Table, Tooltip} from 'antd';
import Add from './component/Add'

class TypeList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            visible: false,
            pageNum: 1,
            pageSize: 10,
            current: 1
        }

        this.columns = [
            {
                title: 'id',
                dataIndex: 'id',
                align: 'center',

            },
            {
                title: '圈子类型',
                dataIndex: 'typeName',
                align: 'center',

            },
            {
                title: '添加人',
                dataIndex: 'createUserName',
                align: 'center',

            },
            {
                title: '添加时间',
                dataIndex: 'createTime',
                align: 'center',

            },

            {
                title: '操作',
                align: 'center',
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.del(record)} style={{marginLeft: 30,color:'red'}}>删除</a>
                        </div>
                    )
                }
            }
        ];
    }

    componentDidMount() {
        this.init();
    }


    init = () => {
        const {list} = this.props
        list({page: 1, size: 10})
    }

    query = (current, pageSize) => {
        this.setState({current})
        this.props.list({ page: current, size: this.state.pageSize })
    }
    del = (record) => {
        const {data} = this.props
        this.props.del({id: record.id}).then(res => {
            this.props.list({page:data.current,size:this.state.pageSize})
        })
    };
    handleCancel = () => {
        this.setState({
            visible: false
        })
    };
    upd = (record) => {
        this.setState({visible: true})
    }

    render() {
        const {data, userLoading} = this.props;
        const {visible, record, type, current} = this.state;
        const pagination = {
            current: data.current,//当前页
            total: data.total,//总条数
            pageSize: data.size,//页大小
            onChange: this.query,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Table columns={this.columns} loading={userLoading} dataSource={data.records}
                       rowKey={record => record.id} pagination={pagination}/>
                <div>
                    <Modal destroyOnClose visible={visible} title={"新增"} footer={null}
                           onCancel={this.handleCancel} handleCancel={this.handleCancel}>
                        <Add handleCancel={this.handleCancel}/>
                    </Modal>
                </div>
            </div>

        );
    }
}


const mapState = state => ({
    ...state.circleType
});

const mapDispatch = dispatch => ({
    ...dispatch.circleType

})

export default connect(mapState, mapDispatch)(TypeList);